/**
* Vue2:实现响应式
*  收集依赖过程：
*    1、执行step1，watchEffect对activeEffect进行赋值
*    2、执行step2，执行watchEffect里面的函数
*    3、执行step3，触发getter，调用depend（）
*    4、执行step4，收集依赖
* 这里的依赖是每个执行函数
*/
class Dep{
  constructor() {
    // 唯一依赖仅更新一次
    this.subscribers = new Set()
  }
  depend() {
    // step4
    if (activeEffect) {
      this.subscribers.add(activeEffect)
    }
  }
  notify() {
    // 遍历更新依赖
    this.subscribers.forEach(effect => {
      effect()
    })
  }
}

/**
 * @map:(key:value):key是字符串
 * @WeakMap:(key:value):key是对象，弱引用，如果为null会被回收
 */
const targetMap = new WeakMap();
function getDep(target, key) {
  // 1、根据target取出相应对象
  let depsMap=targetMap.get(target)
  if (!depsMap) {
    depsMap=new Map()
    targetMap.set(target,depsMap)
  }
  // 2、取出相应的dep对象
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Dep();
    depsMap.set(key, dep);
  }
  return dep; 
}

function reactive(raw) {
  Object.keys(raw).forEach(key => {
    const dep=getDep(raw,key)
    let value = raw[key];
    Object.defineProperty(raw, key, {
      get() {
        // step3
        dep.depend()
        return value
      },
      set(newValue) {
        if (value !== newValue) {
          value = newValue
          dep.notify()
        }
      }
    })
  })
  return raw
}
let info = reactive({ count: 100, name: 'lky' })
let foo=reactive({age:20})



let activeEffect = null;

// step1
function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

// step2
watchEffect(function () {
  console.log("1", info.count * 2);
})
watchEffect(function() {
  console.log("2",foo.age);
})


info.count++
